@import '~src/themes.less';

.gen-value-style(@color) {
  color: @color;
}

.@{css-prefix}-tree-node {
  display: flex;
  position: relative;
  line-height: 20px;

  &.has-carets {
    padding-left: 15px;
  }

  &.has-selector,
  &.has-carets.has-selector {
    padding-left: 30px;
  }

  &.is-highlight,
  &:hover {
    background-color: @highlight-bg-color;
  }

  .@{css-prefix}-indent {
    display: flex;
    position: relative;
  }

  .@{css-prefix}-indent-unit {
    width: 1em;

    &.has-line {
      border-left: 1px dashed @border-color;
    }
  }

  &.dark {
    &.is-highlight,
    &:hover {
      background-color: @highlight-bg-color-dark;
    }
  }
}

.@{css-prefix}-node-index {
  position: absolute;
  right: 100%;
  margin-right: 4px;
  user-select: none;
}

.@{css-prefix}-colon {
  white-space: pre;
}

.@{css-prefix}-comment {
  color: @comment-color;
}

.@{css-prefix}-value {
  word-break: break-word;
}

.@{css-prefix}-value-null {
  .gen-value-style(@color-null);
}

.@{css-prefix}-value-undefined {
  .gen-value-style(@color-undefined);
}

.@{css-prefix}-value-number {
  .gen-value-style(@color-number);
}

.@{css-prefix}-value-boolean {
  .gen-value-style(@color-boolean);
}

.@{css-prefix}-value-string {
  .gen-value-style(@color-string);
}
